<template>
  <div class="home">
    <!-- <div class="f_g_btns">
      <el-button type="primary" size="mini" @click="goBack">返回</el-button>
    </div> -->
    <div class="formtable">
      <el-table
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        tooltip-effect="dark"
        :data="knowtableData"
        style="width: 100%"
      >
        <el-table-column prop="documentName" label="文档名称"> </el-table-column>
        <el-table-column prop="createTime" label="更新时间" width="300"></el-table-column>
        <el-table-column prop="creatorName" label="所有者" width="300"> </el-table-column>
        <!-- <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button @click="deleteClick(scope.row)" type="text" size="small" icon="el-icon-delete">删除</el-button>
          </template>
        </el-table-column> -->
      </el-table>
    </div>
    <div class="uploadbtn" @click="handleClick()">
      <i class="el-icon-circle-plus"></i>
    </div>
    <!-- 上传 -->
    <el-dialog title="文档上传" :show-close="false" :close-on-click-modal="false" :visible.sync="dialogVisible" width="50%">
      <div class="billContainer">
        <!-- 表单内容 -->
        <el-upload
          class="upload-demo"
          drag
          :data="{ knowledgeId: id }" 
          :action="uploadUrl"
          multiple·
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文档拖到此处，或<em>点击上传</em></div>
        </el-upload>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisibleclose()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import zzrNormalUpload from "@/components/zzrFormTrends/zzrNormalUpload";
export default {
  data() {
    return {
      knowtableData: [],
      uploadUrl:
        process.env.NODE_ENV == "development" ? "/api/knowledge/upload" : this.uploadUrl,
      dialogVisible: false,
      id: "",
    };
  },
  components: {
    zzrNormalUpload,
  },
  computed: {},
  created() {
    this.getknowdata();
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    getknowdata() {
      let that = this;
      that.$api
        .post("/knowledge/documents", { knowledgeId: that.$route.params.id })
        .then((res) => {
          that.knowtableData = res;
        });
    },
    handleClick() {
      this.dialogVisible = true;
      this.id = this.$route.params.id;
    },
    dialogVisibleclose(){
      this.getknowdata();
      this.dialogVisible = false;
    }
  },
};
</script>
<style lang="stylus" scoped>
.home
  min-height calc(100vh - 0px)
  background #fff
  .f_g_btns
    padding 20px
  >>>.el-icon-arrow-down
    margin-left 5px
    cursor pointer
  .formtable
    padding 20px
  .uploadbtn
    z-index 10
    cursor pointer
    position fixed
    right 30px
    bottom 30px
    >>>.el-icon-circle-plus
      font-size 50px
      color #409EFF
</style>
